<template>
  <!-- prettier-ignore -->
  <el-dialog :visible.sync="dialog.visible" width="440px"
    @opened="openHandle">
    <div slot="title" class="align-cm">
      <b class="fc-gray10">{{ title }}</b>
    </div>
    <template v-if="dialog.step == '拨号'">
      <template v-if="objArrPhone.length > 0">
        <div class="align-cm" v-for="(v,k) in objArrPhone" :key="k">
          <span class="dis-ib align-rm f14 w100">{{ v.phoneNumber | tel8star}}</span>
          <button class="ml20 btn btn-call" @click="callSCRMPhoneNumber(v.phoneNumber)">
            <i class="iconfont icon-phone"></i>拨打</button>
        </div>
      </template>
      <template v-else>
        <div class="align-cm">暂无可用电话号码</div>
      </template>
    </template>
    <!-- <pre>{{ objArrPhone }}</pre> -->
    <template v-if="dialog.step == '管理'">
      <div v-for="(v,k) in objArrPhone" :key="k" class="mb20">
        <div class="dis-ib col_1">手机号{{ k + 1 }}：</div>
        <div class="dis-ib col_2">{{ v.phoneNumber | tel8star }}</div>
        <div class="dis-ib col_3" v-if="v.isAllowDelete">
          <el-popconfirm  title="确定删除这个号码吗？" placement="right"
            @confirm="delPhoneNumber(v,k)">
            <el-button slot="reference" :loading="isloading"
              size="mini" type="danger" icon="el-icon-delete">
              删除</el-button>
          </el-popconfirm>
        </div>
      </div>
      <div class="mb20">
        <div class="dis-ib col_1">手机号{{ objArrPhone.length + 1 }}：</div>
        <div class="dis-ib col_2">
          <el-input size="mini" v-model="newPhone" placeholder="请输入电话号码"></el-input>
        </div>
        <div class="dis-ib col_3">
          <el-button size="mini" type="primary" icon="el-icon-plus"
            @click="addPhoneNumber" :loading="isloading" :disabled="isRepeatNumber">
            添加手机号</el-button>
        </div>
      </div>
      <div class="text-red" v-if="isRepeatNumber">重复号码？！</div>
    </template>
    <template slot="footer">
      <template v-if="dialog.step == '拨号'">
        <el-button size="small" type="primary" @click="otherStep({step:'管理'})">号码管理</el-button>
      </template>
      <template v-if="dialog.step == '管理'">
        <el-button size="small" type="primary" @click="otherStep({step:'拨号'})">返回拨号</el-button>
        <el-button size="small" @click="closeDialogPhoneManagement()">关闭</el-button>
      </template>
      
    </template>
  </el-dialog>
</template>

<script>
import { bus } from '@/main.js';
import { mapState, mapMutations } from 'vuex';

export default {
  name: 'dialUpManagement',
  computed: {
    ...mapState({
      dialog: state => {
        return state.dialog.拨号管理;
      },
    }),
    cusId: function() {
      return this.dialog.temp.id;
    },
    title: function() {
      if (this.dialog.step == '拨号') {
        return '选择号码拨打';
      }
      if (this.dialog.step == '管理') {
        return '拨号管理';
      }
      return '拨号管理';
    },
    isRepeatNumber: function() {
      let n = this.newPhone;
      let arr = this.objArrPhone;
      return (
        arr.findIndex(v => {
          return v.phoneNumber == n;
        }) > -1
      );
    },
    isErr: function() {
      let n = this.newPhone;
      let exp = new RegExp(/^[0-9]{11}$/);
      return !exp.test(n);
    },
  },
  data() {
    return {
      isDev: process.env.NODE_ENV == 'development',
      objArrPhone: [],
      newPhone: '',
      isloading: false,
    };
  },
  methods: {
    ...mapMutations(['otherStep', 'closeDialogPhoneManagement']),
    test: function(e) {
      console.log(e);
    },
    openHandle: function() {
      let p = _.get(this.dialog, 'temp.allPhoneNumber', []);
      this.objArrPhone.splice(0, this.objArrPhone.length);
      p.forEach((v, i, a) => {
        this.objArrPhone.push({
          phoneNumber: v.phoneNumber,
          isAllowDelete: v.isAllowDelete,
        });
      });
    },
    addPhoneNumber: function() {
      this.loading = true;
      let params = {
        id: this.cusId,
        phoneNumber: this.newPhone,
      };
      let self = this;
      this.$api
        .addSCRMPhoneNumber(params, {})
        .then(res => {
          if (res.code === 200) {
            this.objArrPhone.push({
              phoneNumber: params.phoneNumber,
              isAllowDelete: true,
            });
            this.newPhone = '';
            bus.$emit('updataPhone', {
              id: params.id,
              allPhoneNumber: this.objArrPhone,
            });
          }
        })
        .catch(err => {})
        .finally(() => {
          this.loading = false;
        });
    },
    delPhoneNumber: function(item, idx) {
      if (!item.isAllowDelete) {
        return;
      }
      this.loading = true;
      let params = {
        id: this.cusId,
        phoneNumber: item.phoneNumber,
      };
      this.$api
        .delSCRMPhoneNumber(params, {})
        .then(res => {
          if (res.code === 200) {
            this.objArrPhone.splice(idx, 1);
            bus.$emit('updataPhone', {
              id: params.id,
              allPhoneNumber: this.objArrPhone,
            });
          }
        })
        .catch(err => {})
        .finally(() => {
          this.loading = false;
        });
    },
    callSCRMPhoneNumber: function(phone) {
      let params = {
        id: this.cusId,
        phoneNumber: phone,
        CompanyEmployeeId: this.$store.getters['userInfo/getUserInfo']
          .company_Employee_Id,
      };
      this.$api
        .callSCRMPhoneNumber(params, {})
        .then(res => {
          if (res.code === 200) {
            this.$message({
              message: '号码已下发',
              type: 'success',
            });
          }
        })
        .catch(err => {
          this.$message({
            message: '拨号失败',
            type: 'error',
          });
        })
        .finally(() => {});
    },
  },
};
</script>

<style scoped lang="less">
@import url('../../assets/config.less');
.text-red {
  color: @baseRed;
}
.btn-call {
  width: 66px;
  height: 32px;
  color: @baseGreen;
  &:hover {
    background-color: @baseGrey2;
  }
}
.w100 {
  width: 100px;
}
.col_1 {
}
.col_2 {
  width: 180px;
}
.col_3 {
  margin-left: 4px;
}
</style>
